<template>
    <div class="list">
        <ul>
            <li v-for="(value) in listbook" :key="value.sourceUrl">
                <router-link :to="{ path: '/detail', query: { id: value.sourceUrl } }">
                    <img :src="value.iconUrl">
                    <div class="text">
                        <p>{{ value.title }}</p>
                        <div class="zuozhe">
                            {{ value.author }}
                        </div>
                    </div>
                </router-link>
            </li>

        </ul>
    </div>
</template>
<style lang="less">
.list {
    padding: 10px;
    padding-bottom: 65px;

    h4 {
        padding: 5px;
        border-bottom: 2px solid turquoise;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding-top: 10px;

        li {
            width: 100%;

            a {
                border-radius: 15px;
                width: 100%;
                border-bottom: 5px solid turquoise;
                padding: 5px 4px;
                margin-bottom: 10px;
                display: flex;

                img {
                    height: 150px;
                    border-radius: 15px;
                }

                .text {
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;

                    p {
                        text-align: center;
                        font-size: 20px;
                        font-weight: bold;
                    }

                    .zuozhe {
                        font-size: 16px;
                    }
                }
            }
        }
    }
}
</style>
<script>
import { shujia } from '../api/index'
export default {
    data() {
        return {
            listbook: [
            ],
        }
    },
    methods: {
        async shujiaData() {
            await shujia()
                .then(
                    content => {
                        this.listbook = content.data.books;

                        for (let i = 0; i < this.listbook.length; i++) {
                            this.listbook[i].sourceUrl = this.listbook[i].sourceUrl.slice(8);
                        }
                    }
                )
                .catch(
                    err => {
                        console.log("书架错啦", err);
                    }
                )
        }
    },
    created() {
        this.shujiaData();
    },
}
</script>
